<template>
  <!-- 弹出表单 -->
  <el-dialog title="添加章节" :visible.sync="visible" width="30%">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
      style="width: 500px"
    >
      <el-form-item label="章节名称" prop="chapterName">
        <el-input v-model="ruleForm.chapterName"></el-input>
      </el-form-item>
      <el-form-item label="章节描述" prop="chapterDesc">
        <el-input type="textarea" v-model="ruleForm.chapterDesc"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number
          v-model="ruleForm.sort"
          :min="1"
          :max="10"
          label="排序"
        >
        </el-input-number>
      </el-form-item>
      <el-form-item label="是否免费" prop="isFree">
        <el-radio-group v-model="ruleForm.isFree">
          <el-radio :label="1">免费</el-radio>
          <el-radio :label="0">收费</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="原价"
        prop="chapterOriginal"
        v-if="ruleForm.isFree == 0"
      >
        <el-input v-model="ruleForm.chapterOriginal" type="number"></el-input>
      </el-form-item>
      <el-form-item
        label="优惠价"
        prop="chapterDiscount"
        v-if="ruleForm.isFree == 0"
      >
        <el-input v-model="ruleForm.chapterDiscount" type="number"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
        <el-button @click="visible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import * as api from "@/api/chapters";
export default {
  name: "addchapter",
  data() {
    var checkMoney = (rule, value ,callback) =>{
      if(!value){
        return callback(new Error('价格不能为空'));
      }
      setTimeout(() => {
        if(value < 0.01) {
          callback(new Error('价格不能低于0.01'));
        }else if(value > 9999999){
          callback(new Error('价格不能高于9999999'));
        }else{
          callback();
        }
      },100);
    }
     
    var checkDiscount = (rule ,value, callback) =>{
      if(value < this.ruleForm.chapterOriginal){
          if(value >= 0){
            callback();
          }else{
            callback(new Error('优惠价不能低于0'));
          }
      }else{
        callback(new Error('优惠价不能高于原价'));
      }
    }
    return {
      visible: false,
      flag:0,
      ruleForm: {
        chapterName: "",
        chapterDesc: "",
        sort: "",
        isFree: 1,
        chapterOriginal: "",
        chapterDiscount: "",
        courseId: "",
      },
      //表单验证
      rules: {
        chapterName: [
          { required: true, message: "请输入章节名", trigger: "blur" },
        ],
        chapterDesc: [
          { required: true, message: "请输入章节描述", trigger: "blur" },
        ],
        chapterOriginal: [
          { required: true, message: "请输入原价", trigger: "blur" },
          { validator: checkMoney, trigger: "blur"},
        ],
        chapterDiscount: [
          { required: true, message: "请输入优惠价", trigger: "blur" },
          { validator: checkDiscount, trigger: 'blur'},
        ],
      },
      centerDialogVisible : false,
    };
  },

  methods: {
    submitForm(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          if (this.flag == 0) {
            api.saveChapter(this.ruleForm).then(res => {
                location.reload(true);
            });
          } else {
            api.updateChapter(this.ruleForm).then(res => {
              location.reload(true);
            });
          }
          this.visible = false;
        } else {
          this.$message.error("更新格式有问题！");
          return false;
        }
      });  
    },
    open() {
      this.visible = true;
      this.flag=0;
    },
    editOpen(val){
      this.visible = true;
      this.ruleForm=val;
      this.flag=1;
    },
    addOpen(courseId) {
      this.ruleForm = {
        chapterName: "",
        chapterDesc: "",
        sort: "",
        isFree: 1,
        chapterOriginal: "",
        chapterDiscount: "",
      };
      this.ruleForm.courseId = courseId;
      this.title = "添加章节";
      this.visible = true;
      this.flag = 0;
    },
    editOpen(val,courseId) {
      this.title = "编辑章节";
      this.visible = true;
      this.ruleForm.chapterName = val.chapterName;
      this.ruleForm.chapterDesc = val.chapterDesc;
      this.ruleForm.sort = val.sort;
      this.ruleForm.isFree = val.isFree;
      this.ruleForm.chapterOriginal = val.chapterOriginal;
      this.ruleForm.chapterDiscount = val.chapterDiscount;
      this.ruleForm.courseId = courseId;
      this.flag = 1; 
    },
    deleteOpen(val){
      this.centerDialogVisible = true;
      this.value = val;
      this.ruleForm.courseId = courseId;
    }
  },
};
</script>
<style scoped>
.el-form-item {
  width: 70%;
}
</style>